<script setup>
import { onMounted, ref, watch } from 'vue'
import {
  getOrderListApi,
  cancelOrderApi,
  finishOrderApi,
  refundOrderApi,
  cancelRefundOrderApi,
  deleteOrderApi
} from '@/api/order'
import parseTime from '@/utils/time'
import parseStatus from '@/utils/dictionary'

// 骨架屏加载动画
const loading = ref(true)
// 筛选条件
const orderStatus = ref('')
// 列表数据
const orderList = ref([])
const setOrderList = async () => {
  const res = await getOrderListApi(orderStatus.value)
  orderList.value = res.data
  loading.value = false
}

// 格式化数组时间为HH:mm:ss
const toTimeWithoutDate = (timeArray) => {
  let date = new Date(
    timeArray[0],
    timeArray[1] - 1,
    timeArray[2],
    timeArray[3],
    timeArray[4],
    timeArray[5]
  )
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
}

// 取消订单
const cancelOrder = async (id) => {
  await cancelOrderApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('已成功取消')
  setOrderList()
}

// 完成订单
const finishOrder = async (id) => {
  await finishOrderApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('操作成功')
  setOrderList()
}

// 退款
const refundOrder = async (id) => {
  await refundOrderApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('操作成功')
  setOrderList()
}

// 取消退款
const cancelRefundOrder = async (id) => {
  await cancelRefundOrderApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('操作成功')
  setOrderList()
}

// 删除订单
const deleteOrder = async (id) => {
  // eslint-disable-next-line no-undef
  ElMessageBox.confirm('确认删除吗？', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(async () => {
    await deleteOrderApi(id)
    // eslint-disable-next-line no-undef
    ElMessage.success('删除成功')
    // 重载数据
    setOrderList()
  })
}

onMounted(() => setOrderList())
watch(orderStatus, () => setOrderList())
</script>
<template>
  <div class="order-container">
    <div class="main-container">
      <div>
        <el-tabs v-model="orderStatus">
          <el-tab-pane label="全部" name="" />
          <el-tab-pane label="待付款" name="40001" />
          <el-tab-pane label="进行中" name="40002" />
          <el-tab-pane label="已完成" name="40004" />
        </el-tabs>
      </div>

      <div class="holder-container" v-if="orderList.length === 0">
        <el-skeleton v-if="loading" :rows="8" animated />
        <el-empty v-else description="暂无订单数据" />
      </div>
      <div v-else>
        <!-- 订单列表 -->
        <el-table :data="orderList" style="width: 100%">
          <el-table-column label="产品" align="center" width="200">
            <template #default="scope">
              <CarItemPublish
                disable
                size="mini-more"
                :car="scope.row.vehiclePublish"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="订单号"
            align="center"
            prop="id"
            width="150"
          />
          <el-table-column label="价格" align="center" width="120">
            <template #default="{ row }">
              <el-text type="danger">{{ row.orderPrice }}</el-text>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" align="center" width="170">
            <template #default="{ row }">
              <el-text type="info">{{ parseTime(row.createTime) }}</el-text>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="170">
            <template #default="{ row }">
              <el-text>{{ parseStatus(400, row.orderStatus) }}</el-text>
              <div style="margin-top: 5px" v-if="row.orderStatus === 40001">
                <el-text type="info">
                  <i
                    class="iconfont icon-down-time"
                    style="position: relative; top: 1px"
                  ></i
                  >付款截止:
                </el-text>
                <el-text type="warning">
                  {{ toTimeWithoutDate(row.payEndTime) }}
                </el-text>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-row justify="center">
                <el-col :span="6">
                  <el-link :href="`/order/details/${row.id}`" type="primary">
                    查看
                  </el-link>
                </el-col>
                <template v-if="row.orderStatus === 40001">
                  <el-col :span="6">
                    <el-link :href="`/order/payPage/${row.id}`" type="success">
                      付款
                    </el-link>
                  </el-col>
                  <el-col :span="12">
                    <el-link
                      href="javascript:;"
                      type="warning"
                      @click="cancelOrder(row.id)"
                      >取消订单
                    </el-link>
                  </el-col>
                </template>
                <template v-if="row.orderStatus === 40002">
                  <el-col :span="12">
                    <el-link @click="finishOrder(row.id)" type="success">
                      交易完成
                    </el-link>
                  </el-col>
                  <el-col :span="6">
                    <el-link @click="refundOrder(row.id)" type="danger">
                      退款
                    </el-link>
                  </el-col>
                </template>
                <template
                  v-if="
                    row.orderStatus === 40003 ||
                    row.orderStatus === 40005 ||
                    row.orderStatus === 40006
                  "
                >
                  <el-col :span="6">
                    <el-link @click="deleteOrder(row.id)" type="danger">
                      删除
                    </el-link>
                  </el-col>
                </template>
                <template v-if="row.orderStatus === 40004">
                  <el-col :span="12">
                    <el-link @click="cancelRefundOrder(row.id)" type="warning">
                      取消退款
                    </el-link>
                  </el-col>
                </template>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-desc {
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
  background-color: #fff;
}
.order-container {
  padding: 10px 20px;
  background-color: #fff;
  .pagination-container {
    display: flex;
    justify-content: center;
  }

  .main-container {
    min-height: 500px;

    .holder-container {
      min-height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
